<template>
  <baidu-map
    :center="center"
    :zoom="zoom"
    style="height:600px"
    @click="getClickInfo"
    :scroll-wheel-zoom="true"
  >
  <bm-marker :position="position" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label content="朗沃教育" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
  </bm-marker>
  <bm-info-window :position="position" :title="infoWindow.title" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
      <p v-text="infoWindow.tel"></p>
      <p v-text="infoWindow.address"></p>
      <button @click="clear">Clear</button>
    </bm-info-window>
  </baidu-map>
</template>
<script>
export default {
  name: "TestBaiDu",
  data() {
    return {
      center: {lng: 104.091528, lat: 30.641092}, //定位, 可使用如“四川省成都市”的地区字符串，也可以使用对象如 {lng: 104.090801, lat: 30.640963} 表示经纬度
      zoom: 16, //缩放等级
      position:{
        lng:104.091528,
        lat:30.641092
      },
      infoWindow: {
        show: true,
        title: "朗沃教育(红瓦寺校区)",
        tel:"电话：13881933001",
        address:"地址：四川省成都市武侯区共和村5号-113号"
      }
    };
  },
  methods: { 
    getClickInfo(e) {
      console.log(e.point.lng);
      console.log(e.point.lat);
    },
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    clear () {
      this.infoWindow.contents = ''
    }
  },
};
</script>